<template>
    <div style="width: 100%; margin-top: -10px; padding: 20px;">
        <el-card shadow="hover" style="border-radius: 10px; padding: 20px;">
            <img class="circle-image" src="@/assets/头像.png" alt="头像" />
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="form-item">
                        <span class="label">姓名：</span>
                        <el-input disabled v-model="doctorData.dName"></el-input>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="form-item">
                        <span class="label">账号：</span>
                        <el-input disabled v-model="doctorData.dId"></el-input>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="form-item">
                        <span class="label">性别：</span>
                        <el-input disabled v-model="doctorData.dGender"></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="form-item">
                        <span class="label">手机号：</span>
                        <el-input disabled v-model="doctorData.dPhone"></el-input>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="form-item">
                        <span class="label">身份证号：</span>
                        <el-input disabled v-model="doctorData.dCard"></el-input>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="form-item">
                        <span class="label">邮箱：</span>
                        <el-input disabled v-model="doctorData.dEmail"></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="form-item">
                        <span class="label">职位：</span>
                        <el-input disabled v-model="doctorData.dPost"></el-input>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="form-item">
                        <span class="label">所属科室：</span>
                        <el-input disabled v-model="doctorData.dSection"></el-input>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="form-item">
                        <span class="label">挂号价格：</span>
                        <el-input disabled v-model="doctorData.dPrice"></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="form-item">
                        <span class="label">评分：</span>
                        <el-input disabled v-model="doctorData.dAvgStar"></el-input>
                    </div>
                </el-col>
            </el-row>
            <div class="form-item">
                <span class="label">简介：</span>
                <el-input disabled v-model="doctorData.dIntroduction" type="textarea" :rows="4"
                    placeholder="请输入简介"></el-input>
            </div>
        </el-card>
    </div>
</template>

<script>
import jwtDecode from "jwt-decode";
import { getToken } from "@/utils/storage.js";
import request from "@/utils/request.js";
export default {
    name: "DoctorCard",
    data() {
        return {
            userId: "",
            doctorData: {},
        };
    },
    methods: {
        // 请求医生信息
        requestDoctor() {
            request
                .get("admin/findDoctor", {
                    params: {
                        dId: this.userId,
                    },
                })
                .then((res) => {
                    if (res.data.status != 200)
                        return this.$message.error("获取数据失败");
                    this.doctorData = res.data.data;
                });
        },
        // token 解码
        tokenDecode(token) {
            if (token !== null) return jwtDecode(token);
        },
    },
    created() {
        // 解码 token 信息
        this.userId = this.tokenDecode(getToken()).dId;
        this.requestDoctor();
    },
};
</script>

<style lang="scss" scoped>
.form-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.label {
    font-weight: bold;
    width: 80px;
    display: inline-block;
    text-align: right;
    margin-right: 10px;
}

.el-input {
    width: 100%;
    font-size: 14px;
}

.el-card {
    background-color: #f9f9f9;
    border-radius: 10px;
}

.el-row {
    margin-bottom: 10px;
}

.el-input[type="textarea"] {
    resize: vertical;
}
.circle-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}
</style>
